<template>
  <div class="acount">
    <div class="header flex js-sp">
      <div class="left-num text-left">
        <div class="mb-10">{{ $t("foreign.forexAccountValuation") }}:</div>
        <div class="text-14 textf-din flex align-center text-left">
          <div class="textperson-t2 text-bolder">
            {{
              $currency(
                decimalDigitsInputFilter(
                  virtual_wallet
                    ? data?.forex_demo_btc_number
                    : data?.forex_btc_number,
                  4
                )
              )
            }}
            BTC
          </div>
          <div class="textperson-t2">/</div>
          <div class="textperson-t2">
            {{
              $currency(
                decimalDigitsInputFilter(
                  virtual_wallet
                    ? data?.forex_demo_usdt_number
                    : data?.financial_usdt_number,
                  4
                )
              )
            }}
            USD
          </div>
          <!-- <div
            class="mg-lf-sm text-12 radius point bd-blue text-login simulation-box"
            @click="onChangeVirtualWallet"
          >
            {{
              virtual_wallet
                ? $t("foreign.switchRealAccount")
                : $t("foreign.switchDemoAccount")
            }}
          </div> -->
        </div>
      </div>
      <div class="left-num text-left"></div>
      <div class="input-center cust-input">
        <el-input
          v-model="state.currency"
          @change="find"
          :placeholder="$t('tips.currencyTip')"
        >
          <template #prefix>
            <img
              style="margin-top:10px;margin-inline-start:5px"
              src="@/assets/images/search.png"
              class="search-icon"
              alt
            />
          </template>
        </el-input>
      </div>
      <div class="right flex js-sp align-center">
        <el-switch
          v-model="state.ishidden"
          active-color="#2E96F6"
          @change="hidden"
          inactive-color="#EAECEF"
        ></el-switch>
        <span class="text-14 persontext-t2 point">
          {{ $t("assets.hideSmallAssets") }}
        </span>
        <el-tooltip
          class="item"
          effect="dark"
          :content="$t('assets.hidden')"
          placement="top"
        >
          <i class="el-icon-warning-outline text-16"></i>
        </el-tooltip>
      </div>
    </div>
    <!-- 表格数据 -->
    <div class="table">
      <el-table
        :data="state.tableData"
        header-cell-class-name="eltablebg"
        style="width: 100%"
      >
        <el-table-column
          prop="currency_name"
          :sortable="true"
          :label="$t('assets.currency')"
        >
          <template #default="r">
            <div class="flex align-center js-st">
              <!-- <div
                class="bd-blue text-login text-10 tag mg-rt-base"
                v-if="virtual_wallet"
              >
                {{ $t("foreign.demo") }}
              </div> -->
              <div>{{ r.row.currency_name }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop :label="$t('foreign.balance')" :sortable="true">
          <template #default="r">
            <span>{{ $currency(r.row.balance) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop :label="$t('foreign.netWorth')" :sortable="true">
          <template #default="r">
            <span>{{ $currency(r.row.net_worth) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop
          :label="$t('foreign.prepayments')"
          :sortable="true"
        >
          <template #default="r">
            <span>{{ $currency(r.row.advance_payment) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop
          :label="$t('foreign.prepaymentsAvailable')"
          :sortable="true"
        >
          <template #default="r">
            <span>{{ $currency(r.row.available_prepayment) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop
          :label="$t('foreign.prepaymentsLevel')"
          :sortable="true"
        >
          <template #default="r">
            <span>
              {{ $currency(rideFix(r.row.prepayment_level, 100)) }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column prop :label="$t('assets.operate')" width="140">
          <template #default="r">
            <!-- <span
              class="personlink mr-16 point"
              v-if="r.row.currency_recharge_status"
              @click="recharge(r.row.currency_id)"
              >{{ $t("assets.recharge") }}</span
            > -->
            <span
              class="personlink mr-16 point"
              @click="goexchange()"
              v-show="status"
            >
              {{ $t("assets.toTrade") }}
            </span>
            <span
              class="personlink point"
              @click="assetsAccount(r.row.currency_id)"
              >{{ $t("assets.billingDetails") }}</span
            >
          </template>
        </el-table-column>
        <template #empty>
          <Norecord />
        </template>
      </el-table>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, computed, watch } from "vue";
import Norecord from "@/components/noRecord/NoRecord.vue";
import { useRouter } from "vue-router";
import { decimalDigitsInputFilter, transferToNumber } from "@/utils/common";
import { rideFix } from "@/utils/precisionMath";
import { useStore } from "vuex";
import UseSystemSetting from "@/commonapi/useSystemSetting";

export default {
  name: "Bibiacount",
  props: { data: Object, status: Boolean },
  emits: ["assetsAccount", "changeStatus"],
  components: { Norecord },
  setup(props, { emit }) {
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    const state = reactive({
      currency: "",
      ishidden: false,
      dialogVisible: false,
      tableData: [],
      account: [],
    });
    const $store = useStore();
    /**
     * methods
     */
    const $router = useRouter();
    onMounted(() => {
      if (props.data) {
        state.tableData = virtual_wallet.value
          ? props.data.wallet_forex_demo_list
          : props.data.wallet_forex_list;
      }
    });
    const forexStatus = computed(() => {
      let list = $store.state.user.systemInfo;
      let flag = false;
      list.forEach((ele) => {
        if (ele.key === "wallet_forex") {
          flag = ele.value;
        }
      });
      return flag;
    });
    // 隐藏小额资产
    const hidden = (val) => {
      let list = virtual_wallet.value
        ? props.data.wallet_forex_demo_list
        : props.data.wallet_forex_list;
      if (val) {
        state.tableData = list.filter((item) => {
          return item.balance > 0.001;
        });
      } else {
        state.tableData = list;
      }
    };
    watch(
      () => virtual_wallet.value,
      (val) => {
        emit("changeStatus", val);
        if (val) {
          state.tableData = props.data.wallet_forex_list;
        } else {
          state.tableData = props.data.wallet_forex_demo_list;
        }
        hidden(state.ishidden);
      }
    );
    // 账单明细
    const assetsAccount = (id) => {
      emit("assetsAccount", id);
    };
    // 查询币种
    const find = (val) => {
      state.tableData = props.data.wallet_nft_list.filter((item) => {
        return item.currency_name.includes(val);
      });
    };
    // 点击充值
    const recharge = (id) => {
      $router.push("/person/recharge?id=" + id);
    };
    // 点击提现
    const cash = (id) => {
      $router.push("/person/cash?id=" + id);
    };
    // 点击去交易
    const goexchange = () => {
      if (forexStatus.value) {
        $router.push("/foreignExchange");
      } else {
        $router.push("/");
      }
    };
    const dolt = (val) => {
      return transferToNumber(val);
    };
    const onChangeVirtualWallet = () => {
      $store
        .dispatch("user/changeVirtualWallet", !virtual_wallet.value)
        .then(() => {
          $store.commit(
            "exchange/SET_ACCOUNTTYPE",
            virtual_wallet.value ? 2 : 1
          );
        });
    };
    return {
      state,
      hidden,
      find,
      assetsAccount,
      recharge,
      cash,
      goexchange,
      decimalDigitsInputFilter,
      rideFix,
      dolt,
      forexStatus,
      virtual_wallet,
      onChangeVirtualWallet,
    };
  },
};
</script>

<style lang="less" scoped>
.acount {
  width: 100%;
}
.header {
  padding: 20px 30px;
  box-sizing: border-box;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-6 {
  margin-bottom: 6px;
}
.mr-16 {
  margin-inline-end: 16px;
}
.textf-din {
  font-family: DINPro;
}
.up {
  min-width: 58px;
  padding: 0 5px;
  height: 22px;
  line-height: 20px;
  margin-inline-start: 17px;
}
.right {
  min-width: 157px;
}
.table {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}

// 账单明细
.detail {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}

.single {
  width: 100%;
  padding: 0 0 20px;
  box-sizing: border-box;
}
.single-line {
  li {
    width: 33%;
  }
}
.cust-input/deep/ .el-input--prefix .el-input__inner {
  padding-inline-start: 40px;
  box-sizing: border-box;
}
.simulation-box {
  padding: 2px 4px;
}
</style>
